<template>
  <a-modal v-model="visible" title="修改密码" :footer="false" width="31.8rem">
    <a-form-model
      :model="formInline"
      :rules="rules"
      ref="form"
      @submit.native.prevent="handleSubmit"
    >
      <a-form-model-item ref="password" prop="password">
        <a-input
          v-model="formInline.password"
          type="password"
          placeholder="请输入密码"
          style="width: 27rem"
        >
        </a-input>
      </a-form-model-item>
      <a-form-model-item ref="repassword" prop="repassword">
        <a-input
          v-model="formInline.repassword"
          type="password"
          placeholder="请再次输入密码"
          style="width: 27rem"
        >
        </a-input>
      </a-form-model-item>
      <a-form-model-item>
        <a-button type="primary" html-type="submit" style="width: 27rem">
          确定修改
        </a-button>
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
import { changePassWord } from "@/utils/utils";
export default {
  name: "CModel",
  data() {
    return {
      formInline: {
        password: "",
        repassword: "",
      },
      rules: {
        password: [
          {
            required: true,
            message: "请输入密码",
          },
        ],
        repassword: [
          {
            required: true,
            message: "请再次输入密码",
          },
          {
            validator: (rule, val, callback) => {
              // 自定义校验规则
              if (!val) {
                callback(new Error(""));
              } else if (val == this.formInline.password) {
                callback(new Error("新旧密码一致"));
              } else {
                callback(); // 正确
              }
            },
            trigger: "change",
          },
        ],
      },
    };
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    handleSubmit() {
      this.$refs.form.validate( (valid) => {
        if (valid) {
          const { password, repassword } = this.formInline;
          changePassWord(password, repassword, this);
        } else {
          this.$message.error("请输入正确的格式");
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>